<template>
  <main @dblclick.stop="openDevTools">
    <div :style="{ textAlign: 'center' }">
      <h1>Electron 牛逼 {{ pkg.version }}</h1>
      <h2>{{ title }}</h2>
      <button @click="theme.toggle">切换主题</button>
    </div>

    <div v-show="update.visible.value">
      <p>{{ JSON.stringify(update.data.value) }}</p>
      <button @click="update.now()">是否升级</button>
    </div>
    <DsPost />
  </main>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useTheme } from './hooks/theme'
import { useUa } from './hooks/ua'
import { useDevice } from './hooks/device'
import { useUpdate } from './hooks/update'

import DsPost from '@render/components/post'
import pkg from '~/package.json'

export default defineComponent({
  name: 'App',
  components: {
    DsPost
  },
  setup() {
    const theme = useTheme()
    const ua = useUa()
    const device = useDevice()
    const update = useUpdate()

    const openDevTools = function (e: MouseEvent) {
      if (device.isMac) {
        if (e.metaKey) {
          API.openDevTools()
        }
        return
      }

      if (e.ctrlKey && e.altKey) {
        API.openDevTools()
      }
    }

    return {
      theme,
      pkg,
      title: import.meta.env.VUE_APP_TITLE,
      openDevTools,
      update
    }
  }
})
</script>
